<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>物资采购</title>
    <link rel="stylesheet" href="css/public.css">
    <style>


        .weui_toast{position:fixed;z-index:3;width:7.6em;min-height:7.6em;top:180px;left:50%;margin-left:-3.8em;background:rgba(40,40,40,.75);text-align:center;border-radius:5px;color:#fff}.weui_icon_toast{/*margin:22px 0 0;*/margin:10px 0 0;display:block}.weui_toast_content{margin:0 0 15px}
        .weui_toast{position:fixed;z-index:3;width:7.6em;min-height:7.6em;top:180px;left:50%;margin-left:-3.8em;background:rgba(40,40,40,.75);text-align:center;border-radius:5px;color:#fff}.weui_icon_toast{/*margin:22px 0 0;*/margin:10px 0 0;display:block}.weui_loading_toast .weui_toast_content{margin-top:64%;font-size:14px}.weui_loading{position:absolute;width:0;z-index:5;left:50%;top:38%}.weui_loading_leaf{position:absolute;top:-1px;opacity:.25}.weui_loading_leaf:before{content:" ";position:absolute;width:8.14px;height:3.08px;background:#d1d1d5;box-shadow:rgba(0,0,0,.0980392) 0 0 1px;border-radius:1px;-webkit-transform-origin:left 50% 0;transform-origin:left 50% 0}.weui_loading_leaf_0{-webkit-animation:a 1.25s linear infinite;animation:a 1.25s linear infinite}.weui_loading_leaf_0:before{-webkit-transform:rotate(0deg) translate(7.92px);transform:rotate(0deg) translate(7.92px)}.weui_loading_leaf_1{-webkit-animation:b 1.25s linear infinite;animation:b 1.25s linear infinite}.weui_loading_leaf_1:before{-webkit-transform:rotate(30deg) translate(7.92px);transform:rotate(30deg) translate(7.92px)}.weui_loading_leaf_2{-webkit-animation:c 1.25s linear infinite;animation:c 1.25s linear infinite}.weui_loading_leaf_2:before{-webkit-transform:rotate(60deg) translate(7.92px);transform:rotate(60deg) translate(7.92px)}.weui_loading_leaf_3{-webkit-animation:d 1.25s linear infinite;animation:d 1.25s linear infinite}.weui_loading_leaf_3:before{-webkit-transform:rotate(90deg) translate(7.92px);transform:rotate(90deg) translate(7.92px)}.weui_loading_leaf_4{-webkit-animation:e 1.25s linear infinite;animation:e 1.25s linear infinite}.weui_loading_leaf_4:before{-webkit-transform:rotate(120deg) translate(7.92px);transform:rotate(120deg) translate(7.92px)}.weui_loading_leaf_5{-webkit-animation:f 1.25s linear infinite;animation:f 1.25s linear infinite}.weui_loading_leaf_5:before{-webkit-transform:rotate(150deg) translate(7.92px);transform:rotate(150deg) translate(7.92px)}.weui_loading_leaf_6{-webkit-animation:g 1.25s linear infinite;animation:g 1.25s linear infinite}.weui_loading_leaf_6:before{-webkit-transform:rotate(180deg) translate(7.92px);transform:rotate(180deg) translate(7.92px)}.weui_loading_leaf_7{-webkit-animation:h 1.25s linear infinite;animation:h 1.25s linear infinite}.weui_loading_leaf_7:before{-webkit-transform:rotate(210deg) translate(7.92px);transform:rotate(210deg) translate(7.92px)}.weui_loading_leaf_8{-webkit-animation:i 1.25s linear infinite;animation:i 1.25s linear infinite}.weui_loading_leaf_8:before{-webkit-transform:rotate(240deg) translate(7.92px);transform:rotate(240deg) translate(7.92px)}.weui_loading_leaf_9{-webkit-animation:j 1.25s linear infinite;animation:j 1.25s linear infinite}.weui_loading_leaf_9:before{-webkit-transform:rotate(270deg) translate(7.92px);transform:rotate(270deg) translate(7.92px)}.weui_loading_leaf_10{-webkit-animation:k 1.25s linear infinite;animation:k 1.25s linear infinite}.weui_loading_leaf_10:before{-webkit-transform:rotate(300deg) translate(7.92px);transform:rotate(300deg) translate(7.92px)}.weui_loading_leaf_11{-webkit-animation:l 1.25s linear infinite;animation:l 1.25s linear infinite}.weui_loading_leaf_11:before{-webkit-transform:rotate(330deg) translate(7.92px);transform:rotate(330deg) translate(7.92px)}@-webkit-keyframes a{0%,0.01%{opacity:.25}0.02%{opacity:1}60.01%,to{opacity:.25}}@-webkit-keyframes b{0%,8.34333%{opacity:.25}8.35333%{opacity:1}68.3433%,to{opacity:.25}}@-webkit-keyframes c{0%,16.6767%{opacity:.25}16.6867%{opacity:1}76.6767%,to{opacity:.25}}@-webkit-keyframes d{0%,25.01%{opacity:.25}25.02%{opacity:1}85.01%,to{opacity:.25}}@-webkit-keyframes e{0%,33.3433%{opacity:.25}33.3533%{opacity:1}93.3433%,to{opacity:.25}}@-webkit-keyframes f{0%{opacity:.270958333333333}41.6767%{opacity:.25}41.6867%{opacity:1}1.67667%{opacity:.25}to{opacity:.270958333333333}}@-webkit-keyframes g{0%{opacity:.375125}50.01%{opacity:.25}50.02%{opacity:1}10.01%{opacity:.25}to{opacity:.375125}}@-webkit-keyframes h{0%{opacity:.479291666666667}58.3433%{opacity:.25}58.3533%{opacity:1}18.3433%{opacity:.25}to{opacity:.479291666666667}}@-webkit-keyframes i{0%{opacity:.583458333333333}66.6767%{opacity:.25}66.6867%{opacity:1}26.6767%{opacity:.25}to{opacity:.583458333333333}}@-webkit-keyframes j{0%{opacity:.687625}75.01%{opacity:.25}75.02%{opacity:1}35.01%{opacity:.25}to{opacity:.687625}}@-webkit-keyframes k{0%{opacity:.791791666666667}83.3433%{opacity:.25}83.3533%{opacity:1}43.3433%{opacity:.25}to{opacity:.791791666666667}}@-webkit-keyframes l{0%{opacity:.895958333333333}91.6767%{opacity:.25}91.6867%{opacity:1}51.6767%{opacity:.25}to{opacity:.895958333333333}}.weui_mask_transparent{position:fixed;z-index:4;width:100%;height:100%;top:0;left:0}
        .weui_toast {
            position: fixed;
            z-index: 3;
            width: 50%;
            min-height: 2rem;
            top: 180px;
            left: 75%;
            margin: 0 auto;
            margin-left: -3.8em;
            background: rgba(40,40,40,.75);
            text-align: center;
            border-radius: 5px;
            color: #fff;
        }




        .purchase {

            position: relative;
            overflow: hidden;
        }

        .purchase h2 {
            position: relative;
            top: 0.44rem;
            left: 0.7rem;
            font-size: 0.44rem;
            color: black;
        }

        .input_purchase {
            padding-left: 0.8rem;
            padding-right: 0.7rem;
        }

        .input_purchase h3 {
            display: inline-block;
            color: black;
            font-size: 0.28rem;
            font-weight: 300;
            margin-top: 0.54rem;
            margin-bottom: 0;
        }

        .input_purchase input {
            width: 4.6rem;
            height: 0.52rem;
            margin-top: 0.6rem;
            float: right;
            border-radius: 0.12rem;
            background: #F7F7F7;
            border: none;
            outline: none;
            box-shadow: inset .5px .5px .5px #c7c6c6;
        }

        .dived {
            height: 0.1rem;
            background: #eae7e7;
        }

        .purchase_time {}

        .purchase_time h2 {
            margin: 0;
        }

        .purchase_time input {
            padding: 0;
            margin: 0.72rem auto;
            height: 0.52rem;
            width: 4.0rem;
            position: relative;
            text-align: right;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 0.12rem;
            border: 1px solid #c8cccf;
        }

        .upload_pic {
            text-align: center;
        }

        .upload_pic h2 {
            text-align: left;
            margin: 0;
        }

        .upload_pic input {
            border-radius: 0.15rem;
            width: 5.16rem;
            position: absolute;
            left: 0;
            margin: 0 auto;
            height: 0.56rem;
            box-shadow: inset 0.5px 0.5px 0.5px #c7c6;
            background: #F7F7F7;
        }

        .upload_pic button {
            width: 5.48rem;
            height: 0.86rem;
            margin: 0 auto;
            position: relative;
            background: #3D88DD;
            display: block;
            color: white;
            font-size: 0.3rem;
            border-radius: 0.2rem;
            box-shadow: 0px 2px 4px 1px #4994e7bd;
            border: none;
            margin-top: 0.58rem;
            margin-bottom: 0.8rem;
        }

        .upload_pic a {
            width: 100%;
            color: white;
            text-decoration: none;
            display: inline-block;
        }
    </style>

</head>

<body>
<div class="purchase">
    <h2>购买信息</h2>
    <div class="input_purchase">
        <h3>名称:</h3>
        <input type="text" class="name">
    </div>
    <div class="input_purchase">
        <h3>规格型号:</h3>
        <input type="text" class="model" style="margin-left: 0!important;" placeholder="请按此格式输入：规格#型号">
    </div>
    <div class="input_purchase">
        <h3>单位:</h3>
        <input type="text" class="unit">
    </div>
    <div class="input_purchase">
        <h3>单价:</h3>
        <input type="number" class="price">
    </div>
    <div class="input_purchase">
        <h3>数量:</h3>
        <input type="number" class="num">
    </div>
    <div class="input_purchase">
        <h3>金额:</h3>
        <input type="number" class="all-price">
    </div>
    <div class="input_purchase" style="margin-bottom: 0.6rem;">
        <h3>供应商:</h3>
        <input type="text" class="provider">
    </div>
    <div class="dived"></div>
    <div class="purchase_time">
        <h2>采购时间</h2>
        <input type="date" class="buy-time">
    </div>
    <div class="dived"></div>
    <div class="upload_pic">
        <h2>添加照片</h2>

        <div class="camera_div">
            <input class="camera_input" onchange="uploadImg();" type="file" capture="camera" accept="image/*" id="photo" name="">
            <span id="photo_name"></span>
            <img class="camera" src="images/camera.png">
        </div>
        <button class="go-purchase">提交申请</button>
    </div>
</div>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript">






    function captureImage(){
        var cmr = plus.camera.getCamera();
        var res = cmr.supportedImageResolutions[0];
        var fmt = cmr.supportedImageFormats[0];
        console.log("Resolution: "+res+", Format: "+fmt);
        cmr.captureImage( function( path ){
                alert( "Capture image success: " + path );
            },
            function( error ) {
                alert( "Capture image failed: " + error.message );
            },
            {resolution:res,format:fmt}
        );
    }
    // 给input  date设置默认值
    var now = new Date();
    //格式化日，如果小于9，前面补0
    var day = ("0" + now.getDate()).slice(-2);
    //格式化月，如果小于9，前面补0
    var month = ("0" + (now.getMonth() + 1)).slice(-2);
    //拼装完整日期格式
    var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
    //完成赋值
    $('.buy-time').val(today);

    //完成赋值
   

        function getQueryString(name) {

            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
        var oAccessToken = getQueryString('access-token');
        if(oAccessToken == null ){
            window.location.href = './index.html';
        }

        <!-- 上传图片配置 -->


        <!-- 上传信息 -->
        function submit_info(imgSrc){
            var oName     =  $(".name").val();
            var oModel    =  $(".model").val();
            var oUnit     =  $(".unit").val();
            var oNum      =  $(".num").val();
            var oPrice    =  $(".price").val();
            var oAllPrice =  $(".all-price").val();
            var oBuyTime  =  $(".buy-time").val();
            var oProvider =  $(".provider").val();
            $.ajax({
                type: "POST",
                url: "/v1/goods/purchase?access-token="+oAccessToken,
                contentType:"application/x-www-form-urlencoded",
                data: {
                    name:oName,
                    model:oModel,
                    unit:oUnit,
                    request_num:oNum,
                    price:oPrice,
                    all_price:oAllPrice,
                    buy_time:oBuyTime,
                    provider:oProvider,
                    image:imgSrc,
                },
                dataType: "json",
                success: function(data) {
                    if (data.status == 200) {
                        $('#loadingToast').fadeOut('fast');
                        window.location.href = "./Result_purchase.html?access-token="+oAccessToken;
                    }else {
                        $('#loadingToast').fadeOut('fast');
                        alert('请填写正确的信息')
                    }
                },
                error:function (data) {
                    if (data.status == 401) {
                        window.location.href = "./index.html";
                    }
                }
            });


        }
        <!-- 点击提交按钮触发 -->
        $('.go-purchase').on('click', function () {
            if(confirm('确定要提交么？')){
                if($('#photo_name').text() ==''){
                    alert('请填写正确的信息')
                }
                loadingToast('正在上传信息，请您稍候...');
                upload_img();   //上传图片
            }
        });

    function upload_img(){
        var myImg = $('.camera_input').get(0).files[0];
        var reader = new FileReader();
        reader.readAsDataURL(myImg);
        reader.onload = function (e) {
            new_img_src = e.target.result;
            dataImg = new_img_src.substring(22);
            $.ajax({
                type: 'post',
                url: './filesave.php',
                data: {dataimg: dataImg, datatype: 'img'},
                beforeSend: function () {
                },
                success: function (str) {
                    // 图片上传成功后上传其他信息，并将图片路径发送给后台
                    submit_info(str)
                }
            });
        };
    }
    function uploadImg() {
        var obj   = document.getElementById("photo");
        var len   = obj.files.length;
        for (var i = 0; i < len; i++) {
            var temp   = obj.files[i].name;
            document.getElementById("photo_name").innerHTML = "<span>" + temp + "</span>"
        }
    }
     // 正在上传的动画
    function loadingToast(){
        var msg;
        arguments[0] ? msg = arguments[0] : msg = '数据加载中' ;
        var loadingToast;
        loadingToast = '\
		<div id="loadingToast" class="weui_loading_toast" style="display:none;">\
			<div class="weui_mask_transparent"></div>\
			<div class="weui_toast">\
				<div class="weui_loading">\
					<div class="weui_loading_leaf weui_loading_leaf_0"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_1"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_2"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_3"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_4"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_5"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_6"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_7"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_8"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_9"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_10"></div>\
					<div class="weui_loading_leaf weui_loading_leaf_11"></div>\
				</div>\
				<p class="weui_toast_content">' + msg + '</p>\
			</div>\
		</div>\
		';
        if(!$('#loadingToast').length){
            $('body').append(loadingToast);
        }else{
            $('#loadingToast .weui_toast_content').html(msg);
        }
        $('#loadingToast').fadeIn('fast');
    }
</script>

</body>

</html>